<template>
    <el-container>
        <el-container>
            <el-header>
                <!--查询和新增，使用表单-->
                <el-form ref="name" inline="true" v-model="person" style="text-align: left">
                    <el-form-item label="角色名称">
                        <el-input v-model="person.name" placeholder="角色名称"></el-input>
<!--                        <el-col :span="8">-->
<!--                            -->
<!--                        </el-col>-->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchPerson">
                            <i class="el-icon-search"></i>
                            查询
                        </el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-popover
                                placement="top"
                                width="500"
                                v-model="visible">
                            <el-form ref="name" inline="true" v-model="newPerson" style="text-align: left">
                                <el-form-item label="角色名称">
                                    <el-input v-model="newPerson.newName" placeholder="角色名称"></el-input>
                                </el-form-item>
                                <el-form-item label="角色权限">
<!--                                    <el-input v-model="newPerson.newPermission"></el-input>-->
                                    <template>
                                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                        <div style="margin: 15px 0;"></div>
                                        <el-checkbox-group v-model="checkedPermissions" @change="handleCheckedPermissionsChange">
                                            <el-checkbox v-for="p in permissions" :label="p" :key="p">{{p}}</el-checkbox>
                                        </el-checkbox-group>
                                    </template>
                                </el-form-item>
                            </el-form>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="visible = false, addPerson()">确定</el-button>
                            </div>
                            <el-button slot="reference" type="success">
                                <i class="el-icon-circle-plus-outline"></i>
                                新增
                            </el-button>
                        </el-popover>

<!--                        <el-button type="success" @click="addPerson">-->
<!--                            <i class="el-icon-circle-plus-outline"></i>-->
<!--                            新增-->
<!--                        </el-button>-->
                    </el-form-item>
                </el-form>
            </el-header>


            <el-main>
                <!--角色表格-->
                <el-table ref="roleTable"
                          :data="persons.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                          tooltip-effect="dark"
                          style="width: 100%"
                          stripe border
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="num" label="编号" width="240"></el-table-column>

<!--                    使用过滤器方便搜索-->
<!--                    <el-table-column prop="name" label="角色名称" width="240"></el-table-column>-->

                    <el-table-column prop="name" label="角色名称" width="240">
                        <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
<!--                        <template slot-scope="scope">-->
<!--                            <span v-for="item in searchPerson(scope.row.name)"-->
<!--                                  :key="item.name"-->
<!--                                  :label="item"-->
<!--                            >-->
<!--                                {{scope.row.name}}-->
<!--                            </span>-->
<!--                        </template>-->
                    </el-table-column>

                    <el-table-column prop="permission" label="角色权限" width="240" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-for="(item, index) in scope.row.permission"
                                  :key="index"
                                  :label="item"
                            >
                                {{item}};
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">

                            <el-button size="mini" type="view" @click="editPerson(scope.$index, scope.row)">
                                编辑
                            </el-button>
                            <el-button size="mini" type="danger" @click="delPerson(scope.$index)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <el-pagination
                        style="display: flex;justify-content: center;height: 100%;align-items: center; "
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-sizes="[1,2,3,4]"
                        layout="total,sizes ,prev, pager, next,jumper"
                        :page-size="1"
                        :current-page="currentPage"
                        :total="this.totalCount"
                ></el-pagination>

            </el-main>
        </el-container>
    </el-container>
</template>


<script>
    const permissionOptions = ["总账管理", "信息管理", "提借管理", "资源管理"];

    export default {
        name: "Home",
        components: {},
        data: function () {
            return {
                checkAll: false,
                checkedPermissions: ["总账管理", "信息管理"],
                permissions: permissionOptions,
                isIndeterminate: true,

                visible: false,

                currentPage: 1, // 默认显示第几页
                totalCount: 3, // 总条数
                pageSizes: [1,2,3,4], // 个数选择器
                pageSize:1, // 默认每页显示的条数，可修改
                keywords: "", // 搜索关键字
                person: {
                    num: "", // 用日期当编号
                    name: "",
                    permission: []
                },
                newPerson: {
                    num: "", // 用日期当编号
                    newName: "",
                    newPermission: ["总账管理", "信息管理"]
                },
                persons: [
                    {
                        num:"2016-05-02",
                        name: "王小虎",
                        permission: ["总账管理", "信息管理", "提借管理", "资源管理"],
                        personIndex: "2"
                    },
                    {
                        num:"2017-05-02",
                        name: "小明",
                        permission: ["总账管理", "信息管理", "提借管理"],
                        personIndex: "1"
                    },
                    {
                        num:"2018-05-02",
                        name: "侯雨茜",
                        permission: ["总账管理", "信息管理", "资源管理"],
                        personIndex: "0"
                    }
                ],
                indexFlag: 3,
                multiSelection: [],
                backupList: []
            };
        },
        created() {
            this.backupList = this.persons
        },
        methods: {
            // 新增角色时的权限复选框
            handleCheckAllChange(val) {
                this.checkedPermissions = val ? permissionOptions : [];
                this.isIndeterminate = false;
                this.newPerson.newPermission = this.checkedPermissions
            },
            handleCheckedPermissionsChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.permissions.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.permissions.length;
                this.newPerson.newPermission = this.checkedPermissions
            },
            // 改变分页页数
            handleSizeChange(val) {
                this.pageSize = val
                // this.$emit('ChangePage', this.pageData);
                this.currentPage = 1
            },
            // 改变分页当前页
            handleCurrentChange(val) {
                this.currentPage = val;
                // this.$emit('ChangePage', this.pageData);
            },
            Appendzero(obj) {
                if (obj < 10) return "0" + "" + obj;
                else return obj;
            },
            searchPerson(){ // 根据关键字查询角色
                let newList = [];
                // 过滤器法
                // return this.persons.filter(item => {
                //     if (item.name.includes(keywords)){
                //         return item
                //     }
                // })

                if (this.person.name === "") {
                    newList = this.backupList
                }else{
                    this.persons.forEach((item, index) => {
                        if (item.name.includes(this.person.name)) {
                            newList.push(this.persons[index])
                        }
                    })
                }
                this.backupList = this.persons
                this.persons = newList
                this.person.name = ""
            },
            addPerson(){ // 添加角色
                var myDate = new Date()
                var y=myDate.getFullYear();
                var m=myDate.getMonth()+1;
                var d=myDate.getDate();
                let tmp = {
                    num: `${y}-${this.Appendzero(m)}-${this.Appendzero(d)}`,
                    name: this.newPerson.newName,
                    permission: this.newPerson.newPermission,
                    personIndex: this.indexFlag
                }
                this.persons.push(tmp)
                // this.backupList.push(newPerson)
                this.indexFlag++
                this.totalCount++
                this.newPerson.newName = ""
                // this.checkedPermissions = ["总账管理", "信息管理"]
            },
            // editPerson(index, row){ // 编辑角色
            //
            // },
            delPerson(index){ // 删除角色
                this.persons.splice(index, 1);
                // for (let i = 0; i < this.backupList.length; i++) {
                //     if (this.backupList[i].personIndex === this.persons[index].personIndex){
                //         this.backupList.splice(i, 1)
                //         break
                //     }
                // }
            }

        }
    }
</script>

<style>

</style>